<template>
	<view class="phoneCodeLogin">
		<!-- <view class="icon">
			<uni-icons type="arrow-left" size="30" color="#101010" @click="goBack"></uni-icons>
			<text>手机号登录</text>
		</view> -->
		<view class="h1">登录</view>
		<!-- 输入框 -->
		<view class="input-box">
			<form >
				<input type="text" name="phone" placeholder="请输入手机号" placeholder-style="color: #9fa2a0;" />
				<view class="yzm">
					<input type="text" name="pwd" placeholder="输入验证码" placeholder-style="color: #9fa2a0;" />
					<button class="btnSend">发送</button>
				</view>
			</form>
		</view>
		<view class="code">
			<navigator class="useCode" url="/subpkg/submy/sublogin/phoneCodeLogin" open-type="reLaunch">使用密码登录</navigator>
		</view>
		<view class="btn">
			<!-- <input type="submit" name="submit" id="" value="登录"> -->
			<button @click="toMyUser">登录</button>
		</view>
		<view class="login">
			<view>
				<view>还没有账号？</view>
				<navigator url="/subpkg/submy/sublogin/register" class="Toregister">注册</navigator>
			</view>
			<view>忘记密码</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<text>登陆/注册表示您同意《用户协议》和《隐私政策》</text>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
	data() {
		return {
			form: {
				phone:'',
				code:''
			}
		};
	},
	computed: {
		// vuex中的token
		...mapState(['token'])
	},
	// 返回首页
	onNavigationBarButtonTap() {
		uni.reLaunch({
			url: '/pages/home/home'
		});
	},

	methods: {
		...mapMutations(['updateToken']),
		login() {},
		getCode() {},
		// 点击登录
		toMyUser() {
			// 发送请求
			// 请求失败--提示
			// 请求成功
			// 获取返回的数据，并存储
			// 其中：调用vuex中的方法来存储/更新token
			this.updateToken('res.data.token');
			if (this.token) {
				uni.$showMsg('登录成功！', 1500);
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/my/user/myUser'
					});
				}, 1500);
			} else {
				uni.$showMsg('登录失败！');
			}
		},
		
	}
};
</script>

<style scoped>
.phoneCodeLogin {
	padding: 60rpx;
	font-size: 32rpx;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.phoneCodeLogin .icon {
	margin-top: 30rpx;
	font-weight: 700;
}

.icon text {
	margin-left: 170rpx;
}

.phoneCodeLogin .h1 {
	margin-top: 60rpx;
	font-weight: 700;
	font-size: 56rpx;
	color: #101010;
}

.phoneCodeLogin .input-box {
	width: 100%;
	margin-top: 60rpx;
}

.phoneCodeLogin .input-box input {
	width: 95%;
	padding: 30rpx 0;
	margin-bottom: 50rpx;
	padding-left: 40rpx;
	font-size: 32rpx;
	border-radius: 20rpx;
	background-color: #e5fbf8;
}

.phoneCodeLogin .code {
	/* margin-left: 420rpx; */
	display: flex;
	flex-direction: row-reverse;
	font-size: 28rpx;
	color: #9fa2a0;
}

.phoneCodeLogin .btn {
	width: 100%;
}

.phoneCodeLogin .btn button {
	width: 100%;
	height: 90rpx;
	margin-top: 60rpx;
	margin-bottom: 50rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 40rpx;
	border-radius: 44rpx;
	color: #fff;
	background-color: #00dcb9;
}

.phoneCodeLogin .login {
	display: flex;
	justify-content: space-between;
}

.phoneCodeLogin .login .Toregister {
	font-size: 32rpx;
	color: #00dcb9;
}

.phoneCodeLogin .login view:nth-child(1) {
	display: flex;
}

.phoneCodeLogin .login view:nth-child(2) {
	font-size: 28rpx;
	color: #9fa2a0;
}

.phoneCodeLogin .footer {
	width: 100%;
	background-color: pink;
}

.phoneCodeLogin .footer text {
	width: 100%;
	font-size: 24rpx;
	text-align: center;
	color: #9fa2a0;
	position: absolute;
	bottom: 40rpx;
	left: 50%;
	transform: translate(-50%, 0);
}
.input-box .yzm {
	position: relative;
}
.input-box .yzm .btnSend {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 140rpx;
	font-size: 24rpx;
	color: #fff;
	background-color: #00dcb6;
}
.input-box .yzm {
	width: 100%;
	padding-right: 200rpx;
	border-radius: 20rpx;
	background-color: #e5fbf8;
}
</style>
